<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<style type="text/css">
		.first-face{
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
		}
		.second-face{
			display: flex;
			flex-direction: column;
			flex-wrap:wrap;
			align-content: space-between;
		}
		.third-face{
			display: flex;
			flex-wrap: wrap;
		
		}
		.column{
			display: flex;
		}
		.column2{
			flex-basis: 100%;
			justify-content: center;
		}
		.column3{
			flex-basis: 100%;
			justify-content: space-between;
		}
	</style>
	<body>
		<div class="first-face">
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="second-face">
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="third-face">
			<div class="column column1">
				<div class="pip"></div>
				<div class="pip"></div>
				<div class="pip"></div>
			</div>
			<div class="column column2">
				<div class="pip"></div>
			</div>
			<div class="column column3">
				<div class="pip"></div>
				<div class="pip"></div>
			</div>
		</div>
	</body>
</html>
